<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet"/>
	<link rel="stylesheet" href="./card.css"/>
    <script src="https://kit.fontawesome.com/9ad64e3491.js" crossorigin="anonymous"></script>
  </head>
<body>

        <p class = "content">Neumorphism Profile Card</p>
    <div class="card-container">
        <div class="card card-1">
            <div class="img-container">
                <img src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600" alt="pic" class = "profile-pic">
            </div>
            <div class="content-align">
                <p class="content1">Que Min</p>
                <p class = "content2">Frontend Developer</p>
            </div>

            <ul class ="links">
                <div class="social-box">
                    <li><a href="#"class ="social-links"><i class="fa-brands fa-facebook fb"></i></a></li>
                </div>
                <div class="social-box">   
                <li><a href="#"class = "social-links"><i class="fa-brands fa-twitter tweet"></i></a></li>
                </div>
                <div class="social-box"> 
                <li><a href="#"class = "social-links"><i class="fa-brands fa-instagram insta"></i></a></li>
                </div>
                <div class="social-box">
                <li><a href="#"class = "social-links"><i class="fa-brands fa-youtube ytb"></i></a></li>
                </div>
            </ul>
            <button class = "btn">Message</button>
        </div>
        <div class="card card-2">
            <div class="img-container">
                <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=600" alt="pic" class = "profile-pic">
            </div>
            <div class="content-align">
            <p class="content1">John Victor</p>
            <p class = "content2">Devops Engineer</p>
        </div>
        
        <ul class ="links">
            <div class="social-box">
                <li><a href="#"class ="social-links"><i class="fa-brands fa-facebook fb"></i></a></li>
            </div>
            <div class="social-box">   
            <li><a href="#"class = "social-links"><i class="fa-brands fa-twitter tweet"></i></a></li>
            </div>
            <div class="social-box"> 
            <li><a href="#"class = "social-links"><i class="fa-brands fa-instagram insta"></i></a></li>
            </div>
            <div class="social-box">
            <li><a href="#"class = "social-links"><i class="fa-brands fa-youtube ytb"></i></a></li>
            </div>
        </ul>
        <button class = "btn">Message</button>
    </div>
        <div class="card card-3">
            <div class="img-container">
                <img src="https://images.pexels.com/photos/3764119/pexels-photo-3764119.jpeg?auto=compress&cs=tinysrgb&w=600" alt="pic" class = "profile-pic">
            </div>
            <div class="content-align">
            <p class="content1">Cathy Mclaren</p>
            <p class = "content2">Backend Developer</p>
        </div>
        
        <ul class ="links">
            <div class="social-box">
                <li><a href="#"class ="social-links"><i class="fa-brands fa-facebook fb"></i></a></li>
            </div>
            <div class="social-box">   
            <li><a href="#"class = "social-links"><i class="fa-brands fa-twitter tweet"></i></a></li>
            </div>
            <div class="social-box"> 
            <li><a href="#"class = "social-links"><i class="fa-brands fa-instagram insta"></i></a></li>
            </div>
            <div class="social-box">
            <li><a href="#"class = "social-links"><i class="fa-brands fa-youtube ytb"></i></a></li>
            </div>
        </ul>
        <button class = "btn">Message</button>
        </div>
        
    </div>
          
   
</body>
</html>